<template>
  <div>
    <div class="center_head">
      <div class="center_logo1">RZF</div>
      <div class="center_logo2">
        <!-- <em>蓉之风</em> -->
        蓉之风
      </div>
      <div class="per_tx_name">
        <img :src="url" alt="" class="per_tx" />
        <span class="per_name">***</span>
      </div>
      <div class="per_left">
        <li class="per_money">
          <span>0</span>
          元
        </li>
        <li class="money_ye">账户余额</li>
      </div>
    </div>
    <!-- <div class="certer_subject">
            <div class="subject_right">
                <li class="my_information" @click="subject1">我的信息</li>
                <li class="my_order" @click="subject2">我的订单</li>
                <li class="my_assets" @click="subject3">我的资产</li>
            </div>
            <My_Information></My_Information>
        </div> -->

    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
      <el-radio-button label="left">left</el-radio-button>
    </el-radio-group>

    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="我的信息">
        <keep-alive>
          <My_information></My_information>
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="我的订单">
        <My_order></My_order>
      </el-tab-pane>
      <el-tab-pane label="我的资产">
        <My_Assets></My_Assets>
      </el-tab-pane>
      <el-tab-pane label="发布租车">
        <Release></Release>
      </el-tab-pane>
      <el-tab-pane label="发布新闻"></el-tab-pane>
    </el-tabs>
  </div>
  <Footer1></Footer1>
</template>

<script setup>
import My_information from "./components/My_Information.vue";
import My_order from "./components/My_order.vue";
import My_Assets from "./components/My_assets.vue";
import Release from "../release/releaseCar.vue";
// import NewsRelease from "../langxia/NewsRelease.vue"
import { reactive, getCurrentInstance } from "vue";

let { proxy } = getCurrentInstance();
let tabPosition = reactive("left");

window.onload = async function () {
  let re = await proxy.$axios.get("/getUser", {
    params: { email: email.value },
  });
  let url = "";
  console.log(re);
};
</script>

<style scoped lang="scss">
.center_head {
  width: 1263px;
  height: 80px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  .center_logo1 {
    text-align: center;
    width: 50px;
    height: 30px;
    margin-left: 30px;
    font-size: 25px;
    background-color: rgb(66, 203, 84);
    border-radius: 10px;
    position: relative;
    top: 27px;
    float: left;
    transform: skewX(-20deg);
  }

  .center_logo2 {
    width: 110px;
    font-size: 36px;
    font-weight: 700;
    line-height: 80px;
    padding-right: 30px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
    margin-left: 3px;
    color: #6fb563;
    border-right: 1px solid gray;
    float: left;
    // background-color: burlywood;
  }

  .per_tx_name {
    height: 80px;
    float: left;
    // background-color: cornflowerblue;
    width: 300px;

    .per_tx {
      width: 60px;
      height: 60px;
      margin-left: 30px;
      border-radius: 50%;
      position: relative;
      top: 10px;
    }

    .per_name {
      position: relative;
      top: -10px;
      margin-left: 15px;
    }
  }

  .per_left {
    margin-right: 30px;
    height: 80px;
    width: 150px;
    // background-color: goldenrod;
    float: right;
    list-style: none;
    text-align: center;

    border-right: 1px solid gray;
    border-left: 1px solid gray;

    .per_money {
      font-size: large;
      line-height: 60px;

      span {
        color: rgb(252, 177, 63);
        font-size: 25px;
      }
    }

    .money_ye {
      font-size: 16px;
      color: rgb(75, 75, 75);
      margin-top: -10px;
      font-family: "宋体";
    }
  }
}

//位置图标
.is-active {
  display: none;
}

//整个
.el-tabs {
  width: 1200px;
  margin: 0 auto;
  border-radius: 20px;
  border-bottom: 2px solid black;
  overflow: hidden;
  background-color: rgb(240, 250, 241);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-tabs__nav {
  width: 200px;
}

::v-deep .el-tabs__item {
  padding: 0px 60px;
  font-size: 18px;
  font-weight: 200;
  margin-top: 10px;
  font-family: "宋体";

  // color: black;
  ::v-deep &:visited {
    color: #6fb563;
  }

  &:hover {
    background-color: rgb(136, 173, 150);
    color: rgb(118, 152, 244);
  }

  &:active {
    color: rgb(118, 152, 244);
  }
}

::v-deep .el-tabs__nav-scroll {
  height: 100%;
  // background-color: blueviolet;
}

::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  height: 350px;
  margin-top: 10px;
}
</style>
